<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">按钮</button>
    <button class="btn">按钮</button>
    <script>
        var btns = document.querySelectorAll('.btn');
        // btns.onclick = function(){}
        // btns[0].onclick  = function(){}
        // btns[1].onclick  = function(){}

        console.log(btns);
        // 循环遍历 按钮添加点击事件--点击的时候获取 点击的元素和元素的下标
        btns.forEach(function (v, i) {
            console.log(v);//元素
            v.onclick = function () {
                //v点击的按钮-i 点击的按钮 对应的下标
                console.log(v, i);
            }
        })


        // i全局变量
        // for (var i = 0; i < btns.length; i++) {
        //     console.log('循环内', i);
        //     btns[i].onclick = function () {
        //         console.log('dianji');
        //         //

        //         console.log(i);//2---点击的时候循环已经结束了，全局变量改成了2
        //         console.log(btns);
        //         console.log(btns[i]);//undefined

        //         // Cannot read properties of undefined (reading 'style')
        //         // Cannot read properties of null (reading 'style')
        //         // 不能读取--undefined的属性（正在读取 style）
        //         // 不能读取--undefined的style属性
        //         btns[i].style.color = 'red'


        //     }
        // }
        // console.log(111);
        // console.log(i);//2  循环结束 i是2
    </script>

</body>

</html>